<template>
    <div class="tool">
      <img src="../assets/images/图层管理-u29.png" alt="" @click="handleImageClick" style="width: 50px; height: 50px;"/>
      <div class="tool-content" v-show="isshowtool">
        <div class="tool-item" @click="baseLayer('sl')" >
          <img src="../assets/images/shiLiangEx.jpg" alt="" />
          基础底图
        </div>
        <span class="spliter">|</span>
        <div class="tool-item" @click="baseLayer('yx')">
          <img src="../assets/images/yingXiangEx.jpg" alt="" />
          影像底图
        </div>
        <span class="spliter">|</span>
        <div class="tool-item" @click="baseLayer('dx')">
          <img src="../assets/images/diXingEx.jpg" alt="" />
          地形底图
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  export default {
    name: "sampleMapTool",
    props: {
      map: Object,
      showtool: String,
    },
    watch: {
      map: function (newData) {
        this.mapNew = newData;
      },
    },
    data() {
      return {
        isshowtool:false,
        mapNew: {},
        vec: "",
        img: "",
      };
    },
    methods: {
      handleImageClick(){
        this.isshowtool = !this.isshowtool;
      },
      baseLayer(Val) {
        let vec = this.mapNew.layer.getLayerByName("矢量图层组");
        let img = this.mapNew.layer.getLayerByName("影像图层组");
        let ter = this.mapNew.layer.getLayerByName("地形图层组");
        if (Val == "sl") {
          vec.setVisible(true);
          img.setVisible(false);
          ter.setVisible(false);
        } else if (Val == "yx") {
          vec.setVisible(false);
          img.setVisible(true);
          ter.setVisible(false);
        } else if (Val == "dx") {
          vec.setVisible(false);
          img.setVisible(false);
          ter.setVisible(true);
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .tool {
    position: absolute;
    bottom: 5rem;
    left: 1.3rem;
    margin: 4rem;
    z-index: 1002;
    display: flex; /* Ensure items are aligned horizontally */
    align-items: center; /* Align items vertically */
    img {
    //   margin-right: 1rem; /* Add space between the image and the content */
    }
    .tool-content {
      padding: 0.5rem 0.8rem;
    //   background: $lite-theme !important;
      border: 1px solid #0090dee5 !important;
      border-radius: 0.5rem;
      color: #ffffff;
      display: flex;
      align-items: center;
      span {
        color: #ffffff;
      }
      &:hover {
        cursor: pointer;
      }
      .spliter {
        font-size: 1.8rem;
        font-weight: 100;
      }
      .tool-item {
        padding: 0.1rem 0.1rem;
        border-radius: 0.5rem;
        font-size: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 5rem;
          height: 4rem;
        }
        &:hover {
          background: #3690c1e5;
        }
      }
    }
    .tips {
      width: 15rem;
      padding: 0.1rem 0.5rem;
      background: #12334467 !important;
      border: 1px solid #005f939b !important;
      border-radius: 0.5rem;
      color: #ffffff;
      margin-top: 1rem;
    }
  }
  </style>
  